<script setup lang="ts">
import { getAllDep } from '@/services/consult'
import { useConsultStore } from '@/stores'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import type { Dep } from '@/types/consult'

const allDep = ref<Dep[]>([])
const store = useConsultStore()
const router = useRouter()

onMounted(async () => {
  const res = await getAllDep()
  allDep.value = res.data
})

const selectDep = (id: string) => {
  store.setDep(id)
  router.push('/consult/illness')
}
</script>

<template>
  <div class="consult-dep-page">
    <cp-nav-bar title="选择科室" />
    <div class="dep-list">
      <div
        class="dep-item"
        v-for="item in allDep"
        :key="item.id"
        @click="selectDep(item.id)"
      >
        <span>{{ item.name }}</span>
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.consult-dep-page {
  padding-top: 46px;
  .dep-list {
    padding: 0 15px;
    .dep-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 0;
      border-bottom: 1px solid var(--cp-line);
      color: var(--cp-dark);
      font-size: 16px;
      cursor: pointer;

      &:hover {
        color: var(--cp-main);
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
